<template>
	<!-- 首页8个nav导航进去页面后的第二个tab -->
	<view class="">
		<view class="flex justify-between">
			<view class="flex flex-wrap" :class="{ overflow: !isAll }">
				<text
					class="font-sm mr-4 lh_42 "
					v-for="(item, index) of tablist1"
					:key="index"
					:class="{ 'font-weight-bold c_main': current == index }"
					@click="tabChange(item, index)"
				>
					{{ item.title }}
				</text>
			</view>
			<view class="" @click="allShow" v-if="tablist1.length > 6"><u-icon name="list" color="#666666" size="22"></u-icon></view>
		</view>
		<view class="flex align-center w-100 mt-1">
			<view class="filter_l">
				<scroll-view scroll-x="true" class="scroll_cont">
					<text
						class="l_tab_item font_22 text-white rounded p"
						style="margin-right: 15rpx;"
						v-for="(item, index) of tablist2"
						:key="index"
						:class="{ bg_main: current1 == index }"
						@click="contTabChange2(item, index)"
					>
						{{ item.title }}
					</text>
				</scroll-view>
			</view>
			<text class="mx-1 text-hover-light">|</text>
			<!-- c_main -->
			<view class="filter_r flex justify-between align-center font-small">
				<view class="flex align-center" @click="updateChange" :class="{ c_main: isUpdate }">
					最近更新
					<u-icon :name="isUpdate ? 'arrow-up-fill' : 'arrow-down-fill'" :color="isUpdate ? '#CF1526' : '#666666'" size="10"></u-icon>
				</view>
				<view class="flex align-center" @click="hotChange" :class="{ c_main: isHot }">
					实时热门
					<u-icon :name="isHot ? 'arrow-up-fill' : 'arrow-down-fill'" :color="isHot ? '#CF1526' : '#666666'" size="10"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { VideoliveClassification } from '@/api/home/home.js';
export default {
	props: ['title'],
	data() {
		return {
			tablist1: [],
			isAll: false,
			current: 0,
			tablist2: [],
			current1: 0,
			isUpdate: false,
			isHot: false,
			catId: 0,
			curTit: ''
		};
	},
	watch: {
		title(newV) {
			this.curTit = newV;
		},
		curTit(newV, oldV) {
			// setTimeout(() => {
			// 	let result = this.tablist1.find((value, index, arr) => {
			// 		if (value.title == newV) {
			// 			this.current = index;
			// 			this.$emit('contTabChange', value, index);
			// 			return value.title == newV;
			// 		}
			// 	});
			// 	console.log('==', result);
			// 	if (!result) {
			this.$emit('contTabChange', 0, 0);
			// 	}
			// }, 300);
		}
	},
	created() {
		this.getInfo();
		this.curTit = this.title;
	},
	methods: {
		getInfo() {
			VideoliveClassification({ cat_id: this.catId })
				.then(res => {
					this.tablist1 = [{ id: 0, title: '全部' }, ...res.dataCateList[0]];
					this.tablist2 = [{ id: 0, title: '全部' }, ...res.dataCateList[1]];
				})
				.catch(err => {
					// console.log("获取导航栏失败", err);
					this.tablist2 = [{ id: 0, title: '全部' }];
				});
		},
		allShow() {
			this.isAll = !this.isAll;
		},
		tabChange(val, idx) {
			this.current = idx;
			this.catId = val.id;
			this.current1 = 0;
			this.getInfo();
			this.$emit('contTabChange', val, idx);
		},
		contTabChange2(val, idx) {
			this.current1 = idx;
			this.$emit('contTabChange2', val, idx);
		},
		// 最近更新
		updateChange() {
			this.isUpdate = !this.isUpdate;
			this.$emit('updateChange', this.isUpdate);
		},
		// 实时热门
		hotChange() {
			this.isHot = !this.isHot;
			this.$emit('hotChange', this.isHot);
		}
	}
};
</script>

<style lang="scss" scoped>
.overflow {
	transition: all 5s ease;
	overflow: hidden;
	height: 50rpx;
}

.filter_l {
	width: 65%;

	.l_tab_item {
		background-color: #c7c7c7;
	}
}

.scroll_cont {
	white-space: nowrap;
}

.filter_r {
	width: 35%;
}

/*  #ifdef H5  */
.filter_r {
	width: 40%;
}

/*  #endif  */
</style>
